Instituto Federal de São Paulo (IFSP)
Campus Bragança Paulista/SP

Análise e Desenvolvimento de Sistemas (ADS)

5o. módulo
Profa. Ana Paula Müller Giancoli
paulagiancoli@ifsp.edu.br

AULA 06 - APLICAÇÃO DAS TECNOLOGIAS

ReactJS-AWSAmplify-AWSAppSync-Cognito-IAM-DynamoDB-GraphQL

Agenda


1.1. O que veremos nesta aula?

1.2. Outros Tutoriais

Curiosidade

2. Criando a aplicação

2.1. Modelo Figma


2.2. Criando a aplicação ReactJS

2.2.1. Ambiente de Desenvolvimento

2.2.2. Acessando a pasta da aplicação

Instrução de criação do app ReactJS


2.3. Utilizando o VSCode

Acessando a pasta

Iniciando a aplicação


2.4. Criando um repositório no Github

Importante: lembre-se de verificar a instalação do Git em seu computador. Se desejar utilize um software de gráfico de gerenciamento dos repositórios.

2.4.1. Inicializando o Git

1. Inicializando o git

2. Definindo o repositório de origem a ser utilizado

3. Marcando todos os arquivos e subpastas da pasta amplifyapp

4. Criando o pacote com as alterações a serem feitas no repositório do Github

5. Efetuando o envio dos arquivos para o repositório no Github


2.5. Instalando a CLI do Amplify

Instalando a CLI

2.5.1. Configurando a CLI do Amplify

Configurando a CLI do Amplify

IMPORTANTE

OBSERVAÇÃO

2.5.2. Inicializando a aplicação no Amplify

Instrução para iniciar a aplicação no Amplify
Preencha conforme abaixo

2.5.3. Visualizar a aplicação no Amplify


2.6. Efetuando o Login no Console de gerenciamento da AWS


Faça somente estes dois passos, se desejar criar uma aplicação diretamente no Amplify.


2.6.1. Associando o Amplify Frontend ao seu Github

Nesta etapa, os arquivos do github serão utilizados para montar seu frontend no Amplify.

2.6.2. Modificando o Frontend

2.6.3. Enviando ao repositório do Github

Saída


2.7. Adicionando autenticação

2.7.1. Instalando as bibliotecas do Amplify

Instalando as bibliotecas do Amplify

2.7.2. Adicionando o serviço de autenticação

Instalando Autenticação
Preencha conforme abaixo

2.7.3. Implantando o serviço de autenticação

Implantando a autenticação

2.7.4. Configurando o app React para usar os recursos do Amplify

Adequando os arquivos do React para usar os recursos do Amplify

2.7.5. Configurando o app React para utilizar o recurso de Autenticação

Configurando o src/App.js

2.7.6. Adequando para o português

2.7.7. Testando localmente

Saída

2.7.8. Enviando ao repositório do Github


2.8. Adicionando uma API GraphQL e um banco de dados

Adicionando uma api
Preencha conforme abaixo

O esquema do GraphQL será criado em:

2.8.1. Implantando a API GraphQL

Implantando a API GraphQL

Consultando a API

Visualizar o app do Amplify

2.8.2. Verificando a API do AppSync

2.8.3. Documentação na API AppSync

2.8.4. Modificando nosso app para interagir com a API

2.8.5. Testando localmente

2.8.5.1. Criando um usuário

2.8.5.2. Validando o acesso

2.8.5.3. Visualizando a aplicação


2.9. Adicionando o armazenamento

2.9.1. Criando o serviço de armazenamento

Adicionando o Storage
Preencha conforme abaixo

2.9.2. Implantando o Serviço Storage

Implantando o Serviço Storage
Inserir a importação abaixo de todas as outras.
Criar uma nova função para efetuar o processamento da imagem.
Atualizar a função de busca das notas para obter a imagem associada àquela nota, caso exista.
Atualizar a função de criação da notas para adicionar a imagem à matriz de imagens locais, caso haja uma imagem associada à nota.
Adequar o formulário para aceitar a imagem.
E modificar a matriz de notas, de forma que renderize a imagem, caso exista.

2.9.3. Enviando ao repositório do Github

2.9.4. Enviando para o Amplify

2.9.5. Testando localmente

Observação

Para remover indique o nome do serviço
Para excluir o projeto e os recursos associados, é possível executar o comando de exclusão do Amplify

2.10. Adequando o app de acordo com o Modelo do Figma

Saída


Referências

Perguntas


ADS - HTML5, CSS3, JS, React, AWS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2021.

</div> </div>